<script type="text/javascript" src="{:get_root()}/third/artTemplate/template.js"></script>
{if condition="session('?user_id') || ebconfig('content.comment_visitor')"}
    <form action="" id="comment_form" onsubmit="return EBCMS.CONTENT.comment();">
        <textarea class="form-control" rows="5" name="content" placeholder="请遵守当地法律法规！"></textarea>
        <br>
        <div class="row">
            {if condition="ebconfig('content.comment_verify')==1  || (!session('?user_id') && ebconfig('content.comment_visitor_verify'))"}
            <div class="col-sm-8" id="comment_verify_container">
                <input type="text" name="verify" class="form-control" id="comment_verify" placeholder="请输入验证码">
                <script>
                    $(function() {
                        $('#comment_verify').focus(function(event) {
                            if (!$('#comment_verify_img').length) {
                                $('#comment_verify').before('<img class="img-rounded img-verify" width="200" id="comment_verify_img" onclick="EBCMS.FN.change_verify(\'#comment_verify_img\');" src="{:url('index/api/verify')}" alt="验证码" title="点击更换验证码">')
                            }
                            $('#comment_verify_img').show();
                        });
                        $('#comment_verify_container').hover(function() {
                            $('#comment_verify_img').show();
                        }, function() {
                            $('#comment_verify_img').hide();
                        });
                    });
                </script>
            </div>
            {/if}
            <div class="col-sm-4">
                <div class="hidden-sm hidden-md hidden-lg" style="height:15px;"></div>
                <button type="submit" class="btn btn-danger pull-right">提交</button>
            </div>
        </div>
        <input type="hidden" name="tid" value="{$content.id}">
    </form>
    <script>
        $(function(){
            EBCMS.CONTENT.comment = function(){
                $.ajax({
                    url: '{:url('content/comment/add')}',
                    type: 'POST',
                    dataType: 'json',
                    data: $('#comment_form').serialize(),
                    success:function(data){
                        if (data.code) {
                            $('#comment_form textarea').val('');
                            $('#comment_verify').val('');
                            EBCMS.CONTENT.param.page = 1;
                            EBCMS.CONTENT.loadcomment();
                        }else{
                            alert(data.msg);
                        }
                        EBCMS.FN.change_verify('#comment_verify_img');
                    }
                });
                return false;
            };
        });
    </script>
{else /}
    <div class="alert alert-danger" role="alert">
        <p class="text-center">请登录！</p>
    </div>
{/if}
<hr>
<h2>评论</h2>
<hr>
<style>
    .media{
        border: 1px solid #ddd;
        padding: 10px;
    }
</style>
<div id="comments"></div>
<div id="comment_page"></div>
<script>
    $(function(){
        template.config('openTag', '[[');
        template.config('closeTag', ']]');
        EBCMS.CONTENT.param = {
            page:1,
            size:10,
            tid:'{$content.id}',
        }
        EBCMS.CONTENT.loadcomment = function(scroll){
            $('#reply_media').appendTo('#reply_form_contain');
            $.ajax({
                url: '{:url('content/comment/index')}',
                type: 'POST',
                dataType: 'json',
                data: EBCMS.CONTENT.param,
                success:function(res){
                    if (res.code) {
                        var coms = template('comment-item', {
                            rows:EBCMS.FN.array2tree(res.data.comments.data.concat(res.data.subcomments))
                        });
                        $('#comments').html(coms);

                        $('#comment_page').html(res.data.page);
                        $.each($('#comment_page a'), function(index, val) {
                            $this = $(this);
                            $this.attr({
                                href: '###'
                            });
                            num = $this.html();
                            if ($.isNumeric(num)) {
                                $this.data('page',num);
                            }else if(num == '»'){
                                $this.data('page',Number(EBCMS.CONTENT.param.page)+1);
                            }else if(num == '«'){
                                $this.data('page',Number(EBCMS.CONTENT.param.page)-1);
                            }
                            $this.bind('click', function(event) {
                                EBCMS.CONTENT.param.page=$(this).data('page');
                                EBCMS.CONTENT.loadcomment(true);
                            });
                        });
                        if (scroll) {
                            $("body,html").animate({
                                scrollTop:$("#comments").offset().top,
                                },0);
                        }
                    }else{
                        alert(res.msg);
                    }
                }
            });
            return false;
        };
        EBCMS.CONTENT.loadcomment();
        EBCMS.CONTENT.reply = function(id){
            $('#reply_id').val(id);
            $('#reply_media').appendTo('#comment_id_'+id+' .media-body:eq(0) > p');
        }
        EBCMS.CONTENT.replysubmit = function(){
            $.ajax({
                url: '{:url('content/comment/reply')}',
                type: 'POST',
                dataType: 'json',
                data: $('#reply_form').serialize(),
                success:function(data){
                    if (data.code) {
                        $('#reply_form textarea').val('');
                        $('#reply_verify').val('');
                        EBCMS.CONTENT.loadcomment();
                    }else{
                        alert(data.msg);
                    }
                    EBCMS.FN.change_verify('#reply_verify_img');
                }
            });
            return false;
        }
    });
</script>
<script id="comment-item" type="text/html">
    [[each rows as v n]]
        <div class="media" id="comment_id_[[v.id]]">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="{:get_root()}/static/index/image/avatar.gif" width="40" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">[[if v.status == 1]]<button class="btn btn-xs btn-default pull-right" style="cursor:pointer;" onclick="EBCMS.CONTENT.reply('[[v.id]]');">回复</button>[[/if]][[if v.user.nickname]][[v.user.nickname]][[else /]]游客[[/if]][[if v.touser.nickname]] 回复 [[v.touser.nickname]][[/if]]</h4>
            [[if v.status == 1]]<p>[[v.content]]</p>[[else if v.status == 99]]<p class="text-danger">审核中...</p> [[else]] <p class="text-danger">已屏蔽！</p>[[/if]]
            [[if v.rows]]
                [[include 'comment-item' v]]
            [[/if]]
          </div>
        </div>
    [[/each]]
</script>
<div id="reply_form_contain" style="display:none;">
    <div class="media" id="reply_media" style="margin-top:20px;">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="{:get_root()}/static/index/image/avatar.gif" width="40" alt="...">
        </a>
      </div>
      <div class="media-body">
        {if condition="session('?user_id') || ebconfig('content.comment_visitor')"}
        <form action="" id="reply_form" onsubmit="return EBCMS.CONTENT.replysubmit();">
            <textarea class="form-control" rows="3" name="content" placeholder="请遵守当地法律法规！"></textarea>
            <br>
            <div class="row">
                {if condition="ebconfig('content.comment_verify')==1 || (!session('?user_id') && ebconfig('content.comment_visitor_verify'))"}
                <div class="col-sm-8" id="reply_verify_container">
                    <input type="text" name="verify" class="form-control" id="reply_verify" placeholder="请输入验证码">
                    <script>
                        $(function() {
                            $('#reply_verify').focus(function(event) {
                                if (!$('#reply_verify_img').length) {
                                    $('#reply_verify').before('<img class="img-rounded img-verify" width="200" id="reply_verify_img" onclick="EBCMS.FN.change_verify(\'#reply_verify_img\');" src="{:url('index/api/verify?id=2')}" alt="验证码" title="点击更换验证码">')
                                }
                                $('#reply_verify_img').show();
                            });
                            $('#reply_verify_container').hover(function() {
                                $('#reply_verify_img').show();
                            }, function() {
                                $('#reply_verify_img').hide();
                            });
                        });
                    </script>
                </div>
                {/if}
                <div class="col-sm-4">
                    <div class="hidden-sm hidden-md hidden-lg" style="height:15px;"></div>
                    <button type="submit" class="btn btn-danger pull-right">提交</button>
                </div>
            </div>
            <input type="hidden" name="reply_id" id="reply_id" value="">
        </form>
      {else /}
          <div class="alert alert-danger">请登录</div>
      {/if}
      </div>
    </div>
</div>